<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<link href="style/istoolbar.css" rel="stylesheet" type="text/css">

<script language="javascript" src="istoolbar.js"></script>
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/source_html.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
var activeModalWin;

var sBaseHREF="";
var sBodyHeader;
var sBodyFooter;
var sBodyTag;
function doCmd(sCmd,sOption)
  {
  var oSel=idSource.document.selection.createRange();
  var sType=idSource.document.selection.type;
  var oTarget=(sType=="None"?idSource.document:oSel);
  oTarget.execCommand(sCmd,false,sOption);
  }
function bodyOnUnload()
  {
  var oEditor=parent.oUtil.oEditor;
  var obj = parent.oUtil.obj;
  sHTML=oEditor.document.documentElement.outerHTML;
  sHTML=obj.docType+sBaseHREF+sHTML;
  obj.putHTML(sHTML);

  //*** RUNTIME STYLES ***
  obj.runtimeBorder(false);
  obj.runtimeStyles();
  //***********************
  }

function bodyOnLoad() {
  setupToolbar();
  loadTxt();
  initSourceEditor();
}

function initSourceEditor()
  {
  var oEditor=parent.oUtil.oEditor;
  try{var oSel=oEditor.document.selection.createRange();}
  catch(e){btnApply.disabled=true;btnOk.disabled=true;return;}
  var obj = parent.oUtil.obj;

  //selThis (tdk perlu check focus, krn sdh di setActiveEditor
  if (oSel.parentElement)oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  //base handling
  sHTML=oEditor.document.documentElement.outerHTML;
  var arrTmp=sHTML.match(/<BASE([^>]*)>/ig);
  if(arrTmp!=null)sBaseHREF=arrTmp[0];
  for(var i=0;i<oEditor.document.all.length;i++)
    if(oEditor.document.all[i].tagName=="BASE")oEditor.document.all[i].removeNode();
  for(var i=0;i<oEditor.document.all.length;i++)
    if(oEditor.document.all[i].tagName=="BASE")oEditor.document.all[i].removeNode();
  //~~~~~~~~~~~~~

  //Save sBodyHeader, sBodyFooter, sBodyTag
  var s=oEditor.document.documentElement.outerHTML;
  s = s.replace(/<body/gi, "<body");
  s = s.replace(/<\/body>/gi, "</body>");

  var arrTmp=s.split("<body");
  sBodyHeader=arrTmp[0];
  s=arrTmp[1];
  arrTmp=s.split("</body>");
  sBodyFooter=arrTmp[1];
  s=oEditor.document.documentElement.outerHTML;
  s=s.substr(s.indexOf("<body"));
  s=s.substr(0,s.indexOf(">")+1);
  sBodyTag=s;

  //XHTML inside BODY tag
  sBodyContent=recur(oEditor.document.body,"");

  if(sBodyContent.substr(0,4)=="<br>")sBodyContent=sBodyContent.substr(4);//remove <br> if it is added by lineBreak2()

  sBodyContent = sBodyContent.replace(/align=['"]*middle['"]*/gi, "align=\"center\"");

  //Display
  idSource.document.body.innerHTML=sBodyContent;
  idSource.document.body.style.cssText="overflow-x:scroll;overflow-y:scroll;white-space:nowrap";

  //Format
  idSource.document.body.contentEditable=true;
  idSource.document.body.clearAttributes;
  idSource.document.body.style.marginTop='4';
  idSource.document.body.style.marginLeft='10';
  idSource.document.body.style.fontFamily='Tahoma';
  idSource.document.body.style.fontSize='11px';
  idSource.document.body.style.color='black';
  idSource.document.body.style.background='white';
  idSource.document.body.onkeydown = new Function("doKeyPress(idSource.event)");
  idSource.focus();

  doWrap();

  //selThis
  for(var i=0;i<idSource.document.all.length;i++)
    {
    if(idSource.document.all[i].getAttribute("selThis")=="selThis")
      {
      var oSelRange = idSource.document.body.createTextRange();
      oSelRange.moveToElementText(idSource.document.all[i]);
      oSelRange.select();
      }
    }
  }
function doKeyPress(evt)
  {
  if (evt.keyCode==13)
    {
    var thisSel = document.selection.createRange();
    thisSel.pasteHTML('<br>');
    evt.cancelBubble = true;
    evt.returnValue = false;
    thisSel.select();
    thisSel.moveEnd("character", 1);
    thisSel.moveStart("character", 1);
    thisSel.collapse(false);
    return false;
    idSource.focus();
    }
  if (evt.ctrlKey)
    {
    if(evt.keyCode==65)doCmd("SelectAll");
    }
  }

function doUpdate()
  {
  parent.oUtil.obj.saveForUndo();

  var obj = parent.oUtil.obj;

  var sBodyContent = idSource.document.body.innerText;
  sHTML=obj.docType+sBaseHREF+sBodyHeader+sBodyTag+sBodyContent+"</body>"+sBodyFooter;
  obj.putHTML(sHTML);

  //*** RUNTIME STYLES ***
  obj.runtimeBorder(false);
  obj.runtimeStyles();
  //***********************
  }

/************************
  HTML to XHTML (formatted)
************************/
function lineBreak2(tag) //[0]<TAG>[1]text[2]</TAG>
  {
  arrReturn = ["<br>","",""];
  if( tag=="A"||tag=="B"||tag=="CITE"||tag=="CODE"||tag=="EM"||
    tag=="FONT"||tag=="I"||tag=="SMALL"||tag=="STRIKE"||tag=="BIG"||
    tag=="STRONG"||tag=="SUB"||tag=="SUP"||tag=="U"||tag=="SAMP"||
    tag=="S"||tag=="VAR"||tag=="BASEFONT"||tag=="KBD"||tag=="TT"||tag=="SPAN"||tag=="IMG")
    arrReturn=["","",""];

  if( tag=="TEXTAREA"||tag=="TABLE"||tag=="THEAD"||tag=="TBODY"||
    tag=="TR"||tag=="OL"||tag=="UL"||tag=="DIR"||tag=="MENU"||
    tag=="FORM"||tag=="SELECT"||tag=="MAP"||tag=="DL"||tag=="HEAD"||
    tag=="BODY"||tag=="HTML")
    arrReturn=["<br>","","<br>"];

  if( tag=="STYLE"||tag=="SCRIPT")
    arrReturn=["<br>","",""];

  if(tag=="BR"||tag=="HR")
    arrReturn=["","<br>",""];

  return arrReturn;
  }
function fixAttr(s)
  {
  s = String(s).replace(/&/g, "&amp;amp;");//harus di awal
  s = String(s).replace(/</g, "&amp;lt;");
  //s = String(s).replace(/>/g, "&amp;gt;");//tdk apa2
  s = String(s).replace(/"/g, "&amp;quot;");
  //s = String(s).replace(/'/g, "&amp;apos;");//tdk apa2
  return s;
  }
function fixVal(s)
  {
  s = String(s).replace(/&/g, "&amp;amp;");//harus di awal
  s = String(s).replace(/</g, "&amp;lt;");
  var x = escape(s);
  x = unescape(x.replace(/\%A0/gi, "-*REPL*-"));
  //x = unescape(x.replace(/\%A0/gi, "-*REPL*-").replace(/\%20/gi, "-*REPL*-"));

  var obj = parent.oUtil.obj;
  if(obj.preserveSpace)
    s = x.replace(/-\*REPL\*-/gi, "&amp;nbsp;");//Preserve Space
  else
    s = x.replace(/-\*REPL\*-/gi, "&nbsp;");

  return s;
  }
function recur(oEl,sTab)
  {
  var sHTML="";
  for(var i=0;i<oEl.childNodes.length;i++)
    {
    var oNode=oEl.childNodes[i];

    if(oNode.parentNode!=oEl)continue;

    if(oNode.nodeType==1)//tag
      {
      var sTagName = oNode.nodeName;
            var sCloseTag = oNode.outerHTML;
            if (sCloseTag.indexOf("<" + "?" + "xm" + "l" + ":" + "namespace") > -1) sCloseTag=sCloseTag.substr(sCloseTag.indexOf(">")+1);
            sCloseTag = sCloseTag.substring(1, sCloseTag.indexOf(">"));
            if (sCloseTag.indexOf(" ")>-1) sCloseTag=sCloseTag.substring(0, sCloseTag.indexOf(" "));

      var bDoNotProcess=false;
      if(sTagName.substring(0,1)=="/")
        {
        bDoNotProcess=true;//do not process
        }
      else
        {
        /*** tabs ***/
        var sT= sTab;
        sHTML+= lineBreak2(sTagName)[0];
        if(lineBreak2(sTagName)[0] !="") sHTML+= sT;//If new line, use base Tabs
        /************/
        }

      if(bDoNotProcess)
        {
        ;//do not process
        }
      else if(sTagName=="OBJECT" || sTagName=="EMBED")
        {
        s=oNode.outerHTML;

        s=s.replace(/\"[^\"]*\"/ig,function(x){
            x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;").replace(/\s+/ig,"#_#").replace(/&amp;amp;/gi,"&amp;");
            return x});
        s=s.replace(/<([^ >]*)/ig,function(x){return x.toLowerCase()})
        s=s.replace(/ ([^=]+)=([^"' >]+)/ig," $1=\"$2\"");//new

        s=s.replace(/ ([^=]+)=/ig,function(x){return x.toLowerCase()});
        s=s.replace(/#_#/ig," ");

        s=s.replace(/<param([^>]*)>/ig,"\n<param$1 />").replace(/\/ \/>$/ig," \/>");//no closing tag

        if(sTagName=="EMBED")
          if(oNode.innerHTML=="")
            s=s.replace(/>$/ig," \/>").replace(/\/ \/>$/ig,"\/>");//no closing tag

        s=s.replace(/<param name=\"Play\" value=\"0\" \/>/,"<param name=\"Play\" value=\"-1\" \/>")

        sSelThis="";//selThis
        if(oElement==oNode)sSelThis=" selThis='selThis'"

        /*** format ***/ //selThis
        sHTML+="<span style='color:#555555;background:#f7f7f7'><samp "+sSelThis+" style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</samp></span>";
        /**************/
        }
      else if(sTagName=="TITLE")
        {
        //s="<title>"+oNode.innerHTML+"</title>";

        /*** format ***/
        sHTML+="<font color='#0000cc'>&lt;<\/font><font color='#8b4513'>title</font>"+
          "<font color='#0000cc'>&gt;<\/font>" + oNode.innerHTML +
          "<font color='#0000cc'>&lt;/</font><font color='#8b4513'>title</font>"+
          "<font color='#0000cc'>&gt;</font>";
        /**************/
        }
      else
        {
        if(sTagName=="AREA")
          {
          var sCoords=oNode.coords;
          var sShape=oNode.shape;
          }

        var oNode2=oNode.cloneNode();
        if (oNode.checked) oNode2.checked=oNode.checked;
        if (oNode.selected) oNode2.selected=oNode.selected;
        s=oNode2.outerHTML.replace(/<\/[^>]*>/,"");

        if(sTagName=="STYLE")
          {
          var arrTmp=s.match(/<[^>]*>/ig);
          s=arrTmp[0];
          }

        s=s.replace(/\"[^\"]*\"/ig,function(x){
            //x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;").replace(/\s+/ig,"#_#");
            x=x.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\s+/ig,"#_#");
            return x});

        s=s.replace(/<([^ >]*)/ig,function(x){return x.toLowerCase()})

        //s=s.replace(/ ([^=]+)=([^" >]+)/ig," $1=\"$2\"");

        s=s.replace(/ ([^=]+)=/ig,function(x){return x.toLowerCase()});

        s=s.replace(/#_#/ig," ");


        //single attribute
        s=s.replace(/(<hr[^>]*)(noshade=""|noshade)/ig,"$1noshade=\"noshade\"");
        s=s.replace(/(<input[^>]*)(checked=""|checked)/ig,"$1checked=\"checked\"");
        s=s.replace(/(<select[^>]*)(multiple=""|multiple)/ig,"$1multiple=\"multiple\"");
        s=s.replace(/(<option[^>]*)(selected=""|selected)/ig,"$1selected=\"true\"");
        s=s.replace(/(<input[^>]*)(readonly=""|readonly)/ig,"$1readonly=\"readonly\"");
        s=s.replace(/(<input[^>]*)(disabled=""|disabled)/ig,"$1disabled=\"disabled\"");
        s=s.replace(/(<td[^>]*)(nowrap=""|nowrap )/ig,"$1nowrap=\"nowrap\" ");
        s=s.replace(/(<td[^>]*)(nowrap=""\>|nowrap\>)/ig,"$1nowrap=\"nowrap\"\>");

        s=s.replace(/ contenteditable=\"true\"/ig,"");

        if(sTagName=="AREA")
          {
          s=s.replace(/ coords=\"0,0,0,0\"/ig," coords=\""+sCoords+"\"");
          s=s.replace(/ shape=\"RECT\"/ig," shape=\""+sShape+"\"");
          }

        var bClosingTag=true;
        if(sTagName=="IMG"||sTagName=="BR"||
          sTagName=="AREA"||sTagName=="HR"||
          sTagName=="INPUT"||sTagName=="BASE"||
          sTagName=="LINK"||sTagName=="META")//no closing tag
          {
          s=s.replace(/>$/ig," \/>").replace(/\/ \/>$/ig,"\/>");//no closing tag
          bClosingTag=false;
          }

        sSelThis="";//selThis
        if(oElement==oNode)sSelThis=" selThis='selThis'"

        /*** format ***/  //selThis
        sA1="<span"+sSelThis+"><font color='#0000cc'>&lt;<\/font><font color='#8b4513'>"
        sA2="<\/font>"
        sA3="<font color='#0000cc'>&gt;<\/font>"
        sA4="<font color='#0000cc'>/&gt;<\/font>"
        s=s.replace(/<([^ >]*)([^ \/>]*)/ig,sA1+"$1"+sA2+"$2");
        //s=s.replace(/\/>$/ig,sA4);//if there is no closing tag
        s=s.replace(/>$/ig,sA3);
        /**************/

        sHTML+=s;

        if(!bClosingTag)sHTML+="</span>";//selThis

        /*** tabs ***/
        if(sTagName!="TEXTAREA")sHTML+= lineBreak2(sTagName)[1];
        if(sTagName!="TEXTAREA")if(lineBreak2(sTagName)[1] !="") sHTML+= sT;//If new line, use base Tabs
        /************/

        if(bClosingTag)
          {
          /*** CONTENT ***/
          s=oNode.outerHTML;
          if(sTagName=="SCRIPT")
            {
            s = s.replace(/<script([^>]*)>[\n+\s+\t+]*/ig,"<script$1>");//clean spaces
            s = s.replace(/[\n+\s+\t+]*<\/script>/ig,"<\/script>");//clean spaces
            s = s.replace(/<script([^>]*)>\/\/<!\[CDATA\[/ig,"");
            s = s.replace(/\/\/\]\]><\/script>/ig,"");
            s = s.replace(/<script([^>]*)>/ig,"");
            s = s.replace(/<\/script>/ig,"");
            s = s.replace(/^\s+/,'').replace(/\s+$/,'');
            /*** format ***/
            sHTML+="<div><span style='color:#828282;'>//&lt;![CDATA[<samp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</samp>//]]&gt;</span></div>";
            /**************/
            }
          if(sTagName=="STYLE")
            {
            s = s.replace(/<style([^>]*)>[\n+\s+\t+]*/ig,"<style$1>");//clean spaces
            s = s.replace(/[\n+\s+\t+]*<\/style>/ig,"<\/style>");//clean spaces
            s = s.replace(/<style([^>]*)><!--/ig,"");
            s = s.replace(/--><\/style>/ig,"");
            s = s.replace(/<style([^>]*)>/ig,"");
            s = s.replace(/<\/style>/ig,"");
            s = s.replace(/^\s+/,"").replace(/\s+$/,"");
            /*** format ***/
            sHTML+="<div><span style='color:#828282;'>&lt;!--<samp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+s+"</samp>--&gt;</span></div>";
            /**************/
            }
          if(sTagName=="DIV"||sTagName=="P")
            {
            if(oNode.innerHTML==""||oNode.innerHTML=="&nbsp;")
              {
              sHTML+="&amp;nbsp;";
              }
            else sHTML+=recur(oNode,sT+"&nbsp;&nbsp;");
            }
          else
          if (sTagName == "STYLE" || sTagName=="SCRIPT")
            {
            //do nothing
            }
          else
            {
            sHTML+=recur(oNode,sT+"&nbsp;&nbsp;");
            }

          /*** tabs ***/
          if(sTagName!="TEXTAREA")sHTML+= lineBreak2(sTagName)[2];
          if(sTagName!="TEXTAREA")if(lineBreak2(sTagName)[2] !="") sHTML+= sT;//If new line, use base Tabs
          /************/

          /*** format ***/ //selThis
          if (sCloseTag.indexOf(":") >= 0)  //deteksi jika tag tersebut adalah custom tag.
            {
            sHTML+="<font color='#0000cc'>&lt;/</font><font color='#8b4513'>" + sCloseTag.toLowerCase() + "</font><font color='#0000cc'>&gt;</font></span>";
            }
          else
            {
            sHTML+="<font color='#0000cc'>&lt;/</font><font color='#8b4513'>" + sTagName.toLowerCase() + "</font><font color='#0000cc'>&gt;</font></span>";
            }

          /**************/
          }
        }
      }
    else if(oNode.nodeType==3)//text
      {
      sHTML+= fixVal(oNode.nodeValue).replace(/^[\t\r\n\v\f]*/, "").replace(/[\t\r\n\v\f]*$/, "");//Info: "&nbsp" => " " dan kalau di depan "&nbsp;AB&nbsp;C" => "AB C"
      }
    else if(oNode.nodeType==8)
      {
        sTmp=oNode.nodeValue;
        sTmp = sTmp.replace(/^\s+/,"").replace(/\s+$/,"");
        sHTML+= "<div><span style='color:#828282;'>&lt;!--<samp style='font-family:tahoma;margin-top:0px;margin-bottom:0px;'>"+sTmp+"</samp>--&gt;</span></div>";
      }
    else
      {
      ;//Not Processed
      }

    }
  return sHTML;
  }
function doWrap()
  {
  if(inpWrap.checked==true)
    {
    idSource.document.body.style.whiteSpace="normal";//Wrap Text
    }
  else
    {
    idSource.document.body.style.whiteSpace="nowrap";
    }
  }

//*******************
function setupToolbar()
  {
  var obj = parent.oUtil.obj;
  var tb=new ISToolbar("srcEdt");
  tb.onClick=function(id) {tbAction(tb, id);};
  tb.iconPath=obj.iconPath;
  tb.btnWidth=obj.iconWidth;
  tb.btnHeight=obj.iconHeight;

  tb.addButton("btnCut","btnCut.gif",getTxt("Cut"));
  tb.addButton("btnCopy","btnCopy.gif",getTxt("Copy"));
  tb.addButton("btnPaste","btnPaste.gif",getTxt("Paste"));
  tb.addSeparator();
  tb.addButton("btnUndo","btnUndo.gif",getTxt("Undo"));
  tb.addButton("btnRedo","btnRedo.gif",getTxt("Redo"));
  tb.addSeparator();
  tb.addButton("btnSearch","btnSearch.gif",getTxt("Search"));
  idToolbar.innerHTML=tb.render();
  }

function tbAction(tb, id)
  {
  switch(id)
    {
    case "btnCut": doCmd('Cut'); break;
    case "btnCopy": doCmd('Copy'); break;
    case "btnPaste": doCmd('Paste'); break;
    case "btnUndo": doCmd('Undo'); break;
    case "btnRedo": doCmd('Redo'); break;
    case "btnSearch": modelessDialogShow('search2.htm',375,163); break;
    }

  }
//*******************
function modelessDialogShow(url,width,height)
  {
    parent.modelessDialogShow(parent.oUtil.scriptPath+url, width,height,window);
  }
</script>
</head>
<body style="overflow:hidden;margin:0px;background: #f4f4f4">

<table width="100%" height="350px" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="idToolbar">

</td>
</tr>
<tr>
<td style="height:100%">
  <iframe style="width:100%;height:100%;" frameborder="no" src="blank.gif"  name="idSource" id="idSource" contentEditable="true"></iframe>
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-top:10px;" align="right" valign="right">
  <table cellpadding=0 cellspacing=0>
  <td width="100%">
    &nbsp;<input type="checkbox" ID="inpWrap" NAME="inpWrap" class="inpChk" onclick="doWrap()" checked> <span id="txtLang" name="txtLang">Wrap Text</span>
  </td>
  <td>
    <input type="button" name="btnCancel" id="btnCancel" value="cancel" onclick="self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name="btnApply" id="btnApply" value="apply" onclick="doUpdate();initSourceEditor()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name="btnOk" id="btnOk" value=" ok " onclick="doUpdate();self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </table>
</td>
</tr>
</table>

</body>
</html>